<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    <script src="http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
    <script src="/vue.js"></script>
</head>
<style>
    .s1{
        color: pink
    }
    .s2{
        border:1px solid lightblue;
    }
</style>
<body>
    <!-- view 视图层(v) -->
    <div id="app">
        <!-- <h1>hello</h1>
        <p>姓名：{{name}} 年龄：{{age}}</p> -->
        <!-- :value='age' -->
        <!-- <input type="text" name="" id="" v-model='age'>
        <p v-html='html'></p>
        <p v-once v-html='html'></p>
        <p>{{age+1}}</p>
        <p>{{say()}}</p> -->

        <!-- 指令 -->

        <!-- v-if -->
        <!-- <p v-if='age<=10' v-html='"Lucy"'></p>
        <p v-if='age<=20&&age>10' v-html='"Judith"'></p>
        <p v-if='age<=30&&age>20' v-html='"Gerall"'></p> -->
        <!-- <p v-if='age<=10' v-html='"Lucy"'></p>
        <p v-else-if='age<=20' v-html='"Judith"'></p>
        <p v-else-if='age<=30' v-html='"Gerall"'></p> -->

        <!-- v-bind -->
        <!-- <p :class='style1+" "+style2'>Gerall</p> -->

        <!-- v-on -->
        <button v-on:click='say()'>click</button>
        <button @click='say()'>click</button>

        <!-- v-for -->
        <ul>
            <li v-for='val in arr'>{{val}}</li>
        </ul>
    </div>
    <!-- <button id="btn">change</button> -->
</body>
<script>
    // MVVM框架
    // vm层
    var vm=new Vue({
        el:'#app',
        data(){
            //model 模型层(m)
            return {
                text1:'hello!',
                name:'Gerall',
                age:20,
                html:'<i>Erza</i>',
                style1:'s1',
                style2:'s2',
                arr:['洪在烈','朴玄硕','李镇成']
            }
        },
        methods:{
            say(){
                console.log(this.name);
            },
            change(){
                this.name='rose';
            },
        },
        created(){
            console.log(this.name);
        }
    });
    // console.log(vm.name);
    // vm.say();
    // $('#btn').click(function(){
    //     vm.change();
    // })
    // vm.name='Gerall';
    // console.log(vm.name);
</script>
</html>